<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/backstage/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/backstage/css/admin.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script th:src="@{/backstage/js/jquery.js}"></script>
    <script th:src="@{/backstage/js/pintuer.js}"></script>

    <script>
        $(function () {
            //给"全选"按钮添加单击事件
            $("#check-all").click(function () {
                $("tbody tr td input").prop("checked", this.checked);
            });
            $("tbody").on("click", "tr td input", function () {
                //如果列表中的所有checkbox都选中，则"全选"按钮也选中
                if ($("tr td input").size() == $("tr td input:checked").size()) {
                    $("#check-all").prop("checked", true);
                } else {//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
                    $("#check-all").prop("checked", false);
                }
            });

            // 给"添加"按钮添加单击事件
            $("#add-btn").click(function () {
                window.location.href = "/backstage/manager/add";
            });

            // 给"删除"按钮添加单击事件
            $("#del-btn").click(function () {
                //收集参数
                //获取列表中所有被选中的checkbox
                var chekkedIds = $("tr td input:checked");

                if (chekkedIds.size() == 0) {
                    alert("必须选中最少一个管理员");
                    return;
                }

                if (window.confirm("确定删除吗？")) {
                    // 封装参数，将选中的管理员的id存在数组arr中
                    var arr = [];
                    chekkedIds.each(function (i, n) {
                        arr.push($(this).val());
                    });
                    // 发送请求
                    $.ajax({
                            url: '/backstage/manager/del',
                            data: {arr: arr},
                            type: 'post',
                            dataType: 'json',
                            traditional: true,
                            success: function (data) {
                                if (data.code == "1") {
                                    //跳转到业务主页面
                                    window.location.href = "/backstage/manager/list";
                                } else {
                                    //提示信息
                                    alert(data.message);
                                }
                            }
                        }
                    );
                }
            });

            // 给"修改"按钮添加单击事件
            $("#edit-btn").click(function () {
                //收集参数
                //获取列表中所有被选中的checkbox
                var chekkedIds = $("tr td input:checked");

                if (chekkedIds.size() == 0) {
                    alert("请选择操作对象");
                    return;
                }
                if (chekkedIds.size() > 1) {
                    alert("只能选中一个管理员");
                    return;
                }
                // 跳转修改页面
                window.location.href = '/backstage/manager/edit/' + chekkedIds.val();
            });

            // 给"搜索"按钮添加单击事件
            $("#select-btn").click(function () {
                // 收集参数
                let state = $("#state").find("option:selected").val();
                let name = $("#name").val().trim();
                // 发送请求
                window.location.href = '/backstage/manager/list?managerName=' + name + '&managerState=' + state;
            });

        })
    </script>
</head>
<body>
<div>
    <div class="panel admin-panel">
        <div class="panel-head">
            <strong class="bi bi-list-ul"> 管理员列表</strong>
        </div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <button id="add-btn" class="button border-main bi bi-plus-square">添加</button>
                </li>
                <li>
                    <button id="del-btn" class="button border-red bi bi-trash"> 删除</button>
                </li>
                <li>
                    <button id="edit-btn" class="button border-yellow bi bi-pencil-square"> 修改</button>
                </li>
                <li>搜索：</li>
                <li>
                    <select id="state" class="input" style="width:200px; line-height:17px;">
                        <option value="">请选择状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </li>
                <li>
                    <input id="name" type="text" placeholder="请输入用户名关键字" class="input"
                           style="width:250px; line-height:17px;display:inline-block"/>
                    <button id="select-btn" class="button border-green bi bi-search">搜索</button>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th title="全选"><input type="checkbox" id="check-all"/></th>
                <th width="10%">用户名</th>
                <th>密码</th>
                <th>状态</th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="manager:${managers}">
                <td>
                    <input type="checkbox" th:value="${manager.managerId}"/>
                </td>
                <td th:text="${manager.managerName}"></td>
                <td th:text="${manager.managerPassword}"></td>
                <td>
                    <font color="#00CC99" th:if="${manager.managerState=='启用'}">启用</font>
                    <font color="#ff0000" th:if="${manager.managerState=='禁用'}">禁用</font>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>